<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="left" @click="goBack">
				<image class="back-icon" src="/static/back-icon.png"></image>
			</view>
			<text class="nav-title">添加合同计量</text>
		</view>

		<!-- 表单 -->
		<scroll-view class="form-content" scroll-y>
			<!-- 表单内容 -->
			<view class="form-list">
				<!-- 清单编号 -->
				<view class="form-item">
					<text class="form-label">清单编号</text>
					<view class="picker-container" @click="showPicker('supplier')">
						<text class="picker-text" :class="{'selected': form.supplier}">{{form.supplier || '请选择'}}</text>
						<image class="arrow-icon" src="/static/arrow-down.png"></image>
					</view>
				</view>

				<!-- 清单名称 -->
				<view class="form-item">
					<text class="form-label">清单名称</text>
					<view class="picker-container" @click="showPicker('contract')">
						<text class="picker-text" :class="{'selected': form.contract}">{{form.contract || '请选择'}}</text>
						<image class="arrow-icon" src="/static/arrow-down.png"></image>
					</view>
				</view>

				<!-- 计量单号 -->
				<view class="form-item">
					<text class="form-label">计量单号</text>
					<input class="form-input" type="text" v-model="form.id" placeholder="请输入" />
				</view>

				<!-- 工程量 -->
				<view class="form-item">
					<text class="form-label">工程量</text>
					<input class="form-input" type="text" v-model="form.name" placeholder="请输入" />
				</view>

				<!-- 分项（桩号） -->
				<view class="form-item">
					<text class="form-label">分项桩号</text>
					<input class="form-input" type="text" v-model="form.unit" placeholder="请输入" />
				</view>

				<!-- 部位 -->
				<view class="form-item">
					<text class="form-label">部位</text>
					<input class="form-input" type="text" v-model="form.mainParams" placeholder="请输入" />
				</view>

				<!-- 图号 -->
				<view class="form-item">
					<text class="form-label">图号</text>
					<input class="form-input" type="text" v-model="form.fuelQuota" placeholder="请输入" />
				</view>

				<!-- 交工证书 -->
				<view class="form-item">
					<text class="form-label">交工证书</text>
					<input class="form-input" type="text" v-model="form.quotaUnit" placeholder="请输入" />
				</view>


				<!-- 提交按钮 -->
				<view class="submit-button">
					<button class="submit-btn" @click="submitForm">提交</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				supplierList: [
					{ id: 1, name: '供应商1' },
					{ id: 2, name: '供应商2' },
					{ id: 3, name: '供应商3' }
				],
				contractList: [
					{ id: 1, name: '合同1' },
					{ id: 2, name: '合同2' },
					{ id: 3, name: '合同3' }
				],
				categoryList: [
					{ id: 1, name: '挖掘机' },
					{ id: 2, name: '推土机' },
					{ id: 3, name: '装载机' },
					{ id: 4, name: '起重机' }
				],
				form: {
					supplier: '',
					contract: '',
					id: '',
					name: '',
					unit: '',
					model: '',
					mainParams: '',
					fuelQuota: '',
					quotaUnit: '',
					category: ''
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id;
				// 可以根据ID加载设备信息填充表单
				this.form.id = this.id;
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			selectSupplier(supplier) {
				this.form.supplier = supplier.name;
				this.hidePicker();
			},
			selectContract(contract) {
				this.form.contract = contract.name;
				this.hidePicker();
			},
			selectCategory(category) {
				this.form.category = category.name;
				this.hidePicker();
			},
			submitForm() {
				// 表单验证
				if (!this.form.supplier) {
					uni.showToast({
						title: '请选择供应商',
						icon: 'none'
					});
					return;
				}

				if (!this.form.contract) {
					uni.showToast({
						title: '请选择供应商合同',
						icon: 'none'
					});
					return;
				}

				if (!this.form.id) {
					uni.showToast({
						title: '请输入设备编号',
						icon: 'none'
					});
					return;
				}

				if (!this.form.name) {
					uni.showToast({
						title: '请输入设备名称',
						icon: 'none'
					});
					return;
				}

				// 提交表单
				uni.showLoading({
					title: '提交中...'
				});

				// 模拟提交
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					});

					// 返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}, 1000);
			}
		}
	}
</script>

<style>
	/* 移除页面加载后的伪元素 */
	:root uni-page-body::after {
		display: none !important;
	}

	.container {
		flex: 1;
		background-color: #FFFFFF;
	}

	.nav-bar {
		height: 88px;
		background: linear-gradient(103deg, #4980FF -4%, #2B6BFF 99%);
		padding-top: 44px;
		padding-left: 15px;
		padding-right: 15px;
		flex-direction: row;
		align-items: center;
		position: relative;
	}

	.left {
		position: absolute;
		left: 15px;
		height: 24px;
		width: 24px;
		justify-content: center;
		align-items: center;
	}

	.back-icon {
		width: 24px;
		height: 24px;
	}

	.nav-title {
		font-size: 18px;
		color: #FFFFFF;
		font-weight: 500;
		margin-left: 24px;
	}

	.form-content {
		flex: 1;
	}

	.form-list {
		flex-direction: column;
	}

	.form-item {
		flex-direction: row;
		padding: 0 16px;
		border-bottom-width: 0.5px;
		border-bottom-color: #EEEEEE;
		border-bottom-style: solid;
		width: 359px;
		height: 56px;
		align-self: center;
		align-items: center;
	}

	.form-label {
		width: 81px;
		height: 24px;
		font-size: 16px;
		color: rgba(0, 0, 0, 0.9);
		line-height: 24px;
	}

	.form-input-container {
		flex: 1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-left: 16px;
	}

	.form-input {
		flex: 1;
		font-size: 16px;
		color: rgba(0, 0, 0, 0.85);
		margin-left: 16px;
		height: 56px;
	}

	.placeholder {
		color: rgba(29, 33, 41, 0.65);
	}

	.arrow-icon {
		width: 7.35px;
		height: 4.82px;
	}

	.submit-button {
		padding: 0 30px;
		margin-top: 84px;
		margin-bottom: 20px;
		width: 100%;
	}

	.submit-btn {
		height: 44px;
		border-radius: 22px;
		font-size: 16px;
		color: #4980FF;
		background-color: #F0F5FF;
		border-width: 0;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		width: 100%;
	}

	button::after {
		border: none !important;
		outline: none !important;
	}

	/* 选择器样式 */
	.picker-container {
		flex: 1;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin-left: 16px;
	}

	.picker-text {
		font-size: 16px;
		color: rgba(29, 33, 41, 0.65);
		margin-right: 5px;
	}

	.picker-text.selected {
		color: rgba(0, 0, 0, 0.85);
	}

	/* 选择器弹出层样式 */
	.picker-popup {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: transparent;
		z-index: 999;
	}

	.picker-mask {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.picker-content {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	.picker-header {
		height: 53px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		border-bottom-width: 0.5px;
		border-bottom-color: #EEEEEE;
	}

	.cancel-btn {
		font-size: 15px;
		color: #165DFF;
	}

	.confirm-btn {
		font-size: 15px;
		color: #165DFF;
	}

	.picker-title {
		font-size: 15px;
		color: #333333;
		font-weight: 500;
	}

	.picker-list {
		max-height: 400px;
		padding-top: 50px;
	}

	.picker-item {
		height: 44px;
		justify-content: center;
		align-items: center;
		margin: 0 16px;
		border-bottom-width: 1px;
		border-bottom-color: #EEEEEE;
		border-bottom-style: solid;
	}

	.picker-item:first-child {
		border-top-width: 1px;
		border-top-color: #EEEEEE;
		border-top-style: solid;
	}

	.picker-item:last-child {
		border-bottom-width: 0;
	}

	.picker-item-text {
		font-size: 16px;
		color: #333333;
	}
</style>